<template>
  <div>
    <el-card>
      <div slot="header" class="clearfix">
        <span>签名图片列表</span>&nbsp;&nbsp;&nbsp;&nbsp;
        <el-button
          size="mini"
          type="primary"
          @click="handleAdd()"
          icon="el-icon-plus"
          title="添加签名图片"
        />
      </div>
      <el-row :gutter="10">
        <el-col
          :span="4"
          :xs="3"
          :sm="4"
          :md="6"
          :lg="6"
          v-for="(item,index) in img"
          :key="index"
          style="text-align: center;"
        >
          <el-image
            style="height: 150px; width: 100%; border: 1px solid #DCDFE6; border-radius: 4px;"
            :src="item.savePath"
            :preview-src-list="[item.savePath]"
            :fit="fit"
          ></el-image>
          <span>{{item.mainFlag == 1 ? '主签名' : ''}}</span>&nbsp;&nbsp;
          <i
            class="el-icon-delete"
            title="删除这张签名"
            @click="removeSign(item.userAutographId)"
            style="cursor: pointer; color: #F56C6C;"
          ></i>
        </el-col>
      </el-row>
    </el-card>
    <el-dialog title="添加签名图片" :visible.sync="dialogVisible" width="480px">
      <el-form ref="form" :model="form" label-width="100px">
        <el-form-item label="是否主签名" prop="mainFlag">
          <el-radio-group v-model="form.mainFlag" size="small">
            <el-radio-button :label="1">是</el-radio-button>
            <el-radio-button :label="0">否</el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="上传签名">
          <el-upload
            action="https://jsonplaceholder.typicode.com/posts/"
            :file-list="fileList"
            :on-remove="handleRemove"
            :http-request="customRequest"
            :on-change="handleChange"
          >
            <el-button>
              <i class="el-icon-upload" />点击选择文件上传
            </el-button>
          </el-upload>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleSubmit">提交</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { saveOnlyUploads } from '@/api/supplier'
import { createSign, getSign, removeSign } from '@/api/archives'
import { openNotification, getSession } from '@/utils/util'

export default {
  data() {
    return {
      fileList: [],
      userRow: this.$ls.get('userInfo'),
      form: {
        mainFlag: 0
      },
      dialogVisible: false,
      img: [],
      fit: 'cover'
    }
  },
  methods: {
    handleAdd() {
      this.dialogVisible = true
    },
    async handleSubmit() {
      this.$set(this.form, 'userId', this.userRow.userId)
      const res = await createSign(this.form)
      if (res.state === '000000' && res.data !== false) {
        openNotification('success', '新增操作成功')
        this.$refs.form.resetFields()
        this.fileList = []
        this.getImage()
      } else if (res.data === false) {
        openNotification('error', res.message)
        this.$refs.form.resetFields()
        this.fileList = []
      }
      this.dialogVisible = false
    },
    handleChange(file, fileList) {
      console.log('change', file, fileList)
      //   this.fileList = fileList.slice(-2)
    },
    // 删除图片事件处理
    handleRemove(file, fileList) {
      this.fileList = [...fileList]
    },
    // 上传图片事件处理
    customRequest(info, fileList) {
      const formData = new FormData()
      formData.append('file', info.file)
      this.fileList = []
      saveOnlyUploads(formData).then(res => {
        if (res.data !== null) {
          const { data } = res
          this.fileList.push(data)
          // this.fileList[this.fileList.length - 1].status = 'done'
          this.fileList[this.fileList.length - 1].url = data.fileUrl + data.fileName
          this.fileList[this.fileList.length - 1].savePath = data.fileUrl + data.fileName
          this.fileList[this.fileList.length - 1].name = data.uploadTitle

          this.$set(this.form, 'uploadId', data.uploadId)
        }
      })
    },
    async getImage() {
      const res = await getSign({ userId: this.userRow.userId })
      if (res.state === '000000') {
        this.img = res.data
      }
    },
    removeSign(id) {
      const _this = this
      this.$confirm({
        title: '删除操作',
        content: `您确定删除这条记录吗？`,
        okText: '确定',
        okType: 'danger',
        cancelText: '取消',
        centered: true,
        async onOk() {
          removeSign(id).then(res => {
            openNotification('success', '删除成功')
            _this.getImage()
          })
        }
      })
    }
  },
  created() {
    this.getImage()
  }
}
</script>
